<template>
  <div class="integral-container" >
    <ul class="column">
      <li class="one-column" @click="goDetail(1)">
        <i class="iconfont icon-goods">&#xe65e;</i>
        <div class="column-tips">积分：<span class="red-text">1241</span></div>
      </li>
      <li class="one-column" @click="goDetail(2)">
        <i class="iconfont icon-new">&#xe61b;</i>
        <div class="column-tips">兑换记录</div>
      </li>
      <li class="one-column" @click="goDetail(3)">
        <i class="iconfont icon-list">&#xe625;</i>
        <div class="column-tips">如何换取积分</div>
      </li>
    </ul>
    <div class="pro-list">
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="bottom-desc">
            <div class="price-spec">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="bottom-desc">
            <div class="price-spec">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
      <div class="product">
        <img class="product-img" src="../../../static/images/img.jpg" alt="">
        <div class="right-desc">
          <div class="product-name text-nowrap">BCD牌精选东北大米精选东北大米精选东北大米</div>
          <div class="bottom-desc">
            <div class="price-spec">
              <div class="product-spec">25kg装</div>
              <div class="product-price">&yen;25.00+70积分<span class="line">&yen;250.00</span></div>
            </div>
            <i class="iconfont icon-cart">&#xe635;</i>
          </div>
        </div>
      </div>
    </div>
    <div class="load-more" @click="loadMore">查看更多</div>
    <div class="blank"></div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
    }
  },

  components: {
    card
  },

  methods: {
    wxLogin () {
      // let code
      wx.login({
        success: ret => {
          if (ret.code) {
            // code = ret.code
            wx.getUserInfo({
              success: res => {
                console.log(res)
                wx.setStorageSync('userInfo', res.userInfo)
              },
              fail: ret => {
                console.log(ret)
              }
            })
          }
        }
      })
    },
    goDetail (i) {
      switch (i) {
        case 1:
          // wx.navigateTo({
          //   url: '../search/main'
          // })
          break
        case 2:
          wx.navigateTo({
            url: '../history/main'
          })
          break
        case 3:
          wx.navigateTo({
            url: '../help/main'
          })
          break
      }
    }
  },

  created () {
    this.wxLogin()
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  },
  mounted () {
    this.count = this.$store.state.count
  },
  onReachBottom () {
    console.log('分页加载。。。')
  }
}
</script>

<style scoped>
.integral-container {
  /* background-color: #f9f9f9; */
  background-color: #fff;
}

.column {
  padding: 30rpx 10rpx 0 10rpx;
  display: flex;
  justify-content: space-around;
  border-bottom: 4rpx solid #f9f9f9;
}

.one-column {
  margin: 0 35rpx;
  width: 200rpx;
}

.icon-goods,
.icon-new,
.icon-list {
  margin: 0 40rpx;
  border-radius: 50%;
  color: #fff;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50rpx;
}

.icon-goods {
  background-color: #ff4446;
}
.icon-new {
  background-color: #9acb00;
}
.icon-list {
  background-color: #ffae26;
}

.column-tips {
  font-size: 28rpx;
  padding: 15rpx 0;
  text-align: center;
}

.normal-text {
  font-size: 28rpx;
  line-height: 36rpx;
}
.gray-text {
  font-size: 24rpx;
  line-height: 36rpx;
  color: #666;
}
.normal-text {
  font-size: 24rpx;
  line-height: 36rpx;
}

.product {
  display: inline-flex;
  width: 100%;
}
.product + .product {
  border-top: 1rpx solid #f9f9f9;
}
.product-img {
  margin: 10rpx 20rpx;
  width: 230rpx;
  height: 160rpx;
}

.right-desc {
  height: 160rpx;
  width: 470rpx;
  font-size: 26rpx;
  padding-right: 20rpx;
}
.product-name,
.product-spec {
  font-size: 26rpx;
  line-height: 55rpx;
}

.bottom-desc {
  display: flex;
}

.price-spec {
  width: 400rpx;
}

.product-spec {
  color: #666;
}

.product-price {
  margin-top: 25rpx;
  color: #e62225;
}

.red-text {
  color: #e62225;
}

.line {
  margin-left: 40rpx;
  text-decoration: line-through;
}
.icon-cart {
  margin-top: 50rpx;
  background-color: #22ac38;
  font-size: 30rpx;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  width: 57rpx;
  height: 57rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.load-more {
  width: 100%;
  padding: 100rpx 0;
  text-align: center;
  color: gray;
  background-color: #f9f9f9;
  font-size: 26rpx;
}
.blank {
  height: 200rpx;
  width: 100%;
  background-color: #f9f9f9;
}
</style>
